<!-- index -->
<style lang="scss" scoped>
  /* banner */

  @import '~assets/common/css/mixin.scss';
  /* 爱生活 */

  .floor {
    background: #fff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    @include flexbox(space-between, center, column, nowrap);
    .floor-title {
      background: #f5f5f5;
      text-align: center;
      font-size: $title;
      padding: $padding;
      width: 100%;
      font-weight: 600;
    }
    .floor-container {
      width: 100%;
      .floor-container-title {
        padding: $padding;
        font-size: $subtitle;
      }
      .floor-content {
        @include flexbox(flex-start, center, row, wrap);
        position: relative;
        .seckill-t {
          padding: .2rem;
          text-align: center;
        }
        .f-c-i {
          position: relative;
          width: 33.33%;
          padding: .2rem 0; // &:nth-child(2n) {
          //    border-right: 0;
          // }
          // &:nth-child(2n) {
          //    border-right: 0;
          // }
        }
        .f-c-i-prd {
          img {
            max-width: 60px;
            max-height: 60px;
            margin: 0 .2rem;
          }
          @include flexbox(center, center, row, nowrap);
        }
      }
    }
  }
  /* 爱生活 */
</style>
<template>
  <div class="floor" v-if="brandData">
    <!-- 特色推荐 -->
    <div class="floor-title">
      品牌推荐
    </div>
    <div class="floor-container" v-for="(item,index) in brandData" :key="index">
      <div class="floor-container-title">
        <strong>  | {{item.seriesName}}</strong>
      </div>
      <div class="floor-content">
        <div class="f-c-i" v-for="i in item.mallGoodsBrandList" :key="i.id">
          <div class="f-c-i-prd" @click="$router.push({name:'list',params: {brand: i.id}})">
            <img :src="i.brandImg" alt="">
          </div>
          <div class="seckill-t">
            {{i.brandName}}
          </div>
        </div>
      </div>
    </div>
    <!-- 特色推荐 -->
  </div>

</template>
<script>
  import {
    getBrandlList
  } from '@/service/getData';
  import {
    getSessionStorage,
    removeSessionStorage,
    GetQueryString
  } from '@/utils/mixin';
  import {
    Toast
  } from 'mint-ui'
  import FooterView from 'component/footer/footerView';
  export default {
    data() {
      return {
        brandData: null,
        token: getSessionStorage("token"),
        sign: GetQueryString("sign")
      };
    },
    watch: {},
    components: {},

    computed: {},

    methods: {

      async initData() {
        if (!this.token) {
          await this.$store.dispatch('JqLogin', {
            jqsign: this.sign
          }).then(response => {
            this.$store.dispatch("GetUserInfo", {
              user_token: response.data.user_token
            });
          }, err => {
            if (err.status == 21000) {
              this.$router.replace('/login');
            } else {
              Toast({
                message: err.info,
                position: 'bottom'
              })
            }
          })
        }
        let {
          data
        } = await getBrandlList({});
        this.brandData = data.seriesList
      }
    },
    mounted: function () {
      this.initData();
    },
    // beforeRouteLeave(to, from, next) {
    //    console.log(to)
    //    if (to.path == "/list") {
    //       to.meta.keepAlive = false;
    //    } else {
    //       to.meta.keepAlive = true;
    //    }
    //    next();
    // }
  }
</script>